import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import {observer} from 'mobx-react';
import { Tools } from 'weaver-mobile';
import { Reply, CKRichText } from 'weaver-mobile-page';

const NoMask = Reply.NoMask;
const CKRichEditor = CKRichText.CKRichEditor;
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Remark extends Component {
    render(){
        const {store} = this.props;
        const {leftConfig, onSpeechChange, ckStore, replyStore, setOtherParams} = store;

        return (
            <div className='remark'>
                <div className="remark-text">
                    <CKRichEditor
                        placeholder={getLabel('504545','打卡备注')}
                        height={'100%'}
                        store={ckStore}
                    />
                </div>
                <NoMask
                    store={replyStore}
                    showInput={false}
                    visible={true}
                    leftConfig={leftConfig}
                    onSpeechChange={onSpeechChange}
                    onBrowserChange={(k, v) => setOtherParams(k, v)}
                    imgUploadConfig={{capture: 'watermarkCamera'}}
                />
            </div>
        )
    }
}